<template>
	<div class="huizongBox">
		<div  ref="huizong" :style="{width:width,height:height}"></div>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import api from '@/api/index.js'
export default{
	data(){
		return {
			width:'100%',
			height:'200px',
			currIndex:0,
			timer:null
			
		}
	},
	methods:{
		initChart(){
			this.myChart = echarts.init(this.$refs.huizong,'westeros');
			this.myChart.on('mouseover',()=>{
				clearInterval(this.timer)
			})
			this.myChart.on('mouseout',()=>{
				this.startInterval()
			})
			let initOption={
				title:{
					text:'▋ 全国新冠疫情汇总图',
					textStyle:{
						color:'#fff'
					},
					left:20,
					top:20
				}
			}
			this.myChart.setOption(initOption);
		},
		getChart(){
			api.getInfo().then(res=>{
				this.$store.commit('TIAN',res.data.newslist[0]);
				this.updateChart()
				this.startInterval();
			})
		},
		updateChart(){
			const centerArr = [
				['15%','60%'],
				['40%','60%'],
				['65%','60%'],
				['90%','60%'],
			]
			const start = this.currIndex * 4;
			const end = (this.currIndex+1) *4 ;
			let seriesArr = this.$store.getters.allInfo.slice(start,end).map((item,index)=>{
				return {
					type:'pie',
					radius:[60,50],
					center:centerArr[index],
					data:item,
					label:{
						position:'center'
					},
					labelLine:{
						show:false
					}
				}
			})
			this.myChart.setOption({
				series:seriesArr
			});
		},
		startInterval(){
			this.timer = setInterval(()=>{
				this.currIndex++;
				if(this.currIndex > 1){
					this.currIndex = 0
				}
				this.updateChart()
			},5000)
			
		},
		screenAdapter(){
			const offsetWidth = this.$refs.huizong.offsetWidth /100*3.6;
			const adapterOption = {
				series:[
					{
						radius:[offsetWidth*2,offsetWidth*1.125],

					},
					{
						radius:[offsetWidth*2,offsetWidth*1.125]
					},
					{
						radius:[offsetWidth*2,offsetWidth*1.125]
					},
					{
						radius:[offsetWidth*2,offsetWidth*1.125]
					},
				]
			};
			this.myChart.setOption(adapterOption);
			this.myChart.resize({
				animation:{
					duration:300
				}
			})
		}
	},
	mounted() {
		this.initChart();
		this.getChart();
		this.screenAdapter();
		window.addEventListener('resize',this.screenAdapter)
	},
	beforeDestroy() {
		clearInterval(this.timer);
		window.removeEventListener('resize',this.screenAdapter);
	}
}
</script>

<style>
	.huizongBox{
		margin-bottom: 1em;
	}
</style>
